<template>
    <div>
        <ul>
            <li v-for="item,index in zhArr" :key="index">
                <span>{{item.title}}</span>
                <button 
                :class="item.flag == true ? 'active':''" 
                @click="sc(index)">
                    收藏
                </button>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data(){
        return{
            zhArr: [
                {title:"星期一",flag:false},
                {title:"星期二",flag:false},
                {title:"星期三",flag:false},
                {title:"星期四",flag:false},
                {title:"星期五",flag:false},
            ],
        }
    },
    methods:{
        sc(i){
            console.log(i);
            this.zhArr[i].flag = !this.zhArr[i].flag;
        }
    }
}
</script>

<style lang="scss" scoped>
ul{
    // border: 1px solid #000;
    width: 400px;
    margin: 0 auto;
    li{
        width: 400px;
        height: 80px;
        line-height: 80px;
        position: relative;
        button{
            position: absolute;
            padding: 10px 10px;
            right: 10px;
            top: 20px;
            &.active{
                background-color: red;
                color: #fff;
                border: none;
            }
        }
    }
}
</style>